import React, { useState } from 'react';
import { connect } from 'react-redux';
import { View, Button, Input, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import camera from '@/giftCardSubPack/images/digitalCard/icon-camera.png';
import loading from '@/giftCardSubPack/images/digitalCard/loading.png';
import '../style.scss';

const Index = ({}) => {
  const [val, setVal] = useState();
  const changeVal = (e) => {
    setVal(e.detail.value);
  };
  const next = () => {
    if (val.length !== 15) {
      Taro.showToast({
        title: '请填写正确的卡号',
        icon: 'none',
      });
    } else {
      Taro.navigateTo({ url: '/orderSubPack/digitalCard/card/index' });
    }
  };
  return (
    <View className="container">
      <View style={{ display: '' }}>
        <View className="title-l-1">请输入卡号</View>
        <View className="input-view">
          <Input
            placeholder="请输入卡号"
            placeholderStyle="color:rgba(0,0,0,.5)"
            value={val}
            onInput={changeVal}
            type="number"
          />
          <Image src={camera} className="icon" />
        </View>
        <View className="btn-view">
          <Button className="btn-yellow" onClick={next}>
            下一步
          </Button>
        </View>
      </View>
      <View className="binding" style={{ display: 'none' }}>
        <Image src={loading} className="loading" />
        <View className="normal-text">数币卡绑定</View>
        <View>正在读卡中，请稍后...</View>
      </View>
    </View>
  );
};
export default connect(({}) => ({}))(Index);
